// 类型
$spacing-types: (
	m: margin,
	p: padding
);
// 位置
$spacing-directions: (
	t: top,
	b: bottom,
	l: left,
	r: right
);
$spacing-base-size: 1rpx; // 基数
// 循环出 margin 与 padding 的各类值
@each $typeKey, $type in $spacing-types {
	@for $i from 0 through 60 {
		// 如果能够被 2 整除，将应用以下样式
		@if ($i % 2 == 0) {
			// m-10{margin:10px} || p-30{padding:30px}
			.#{$typeKey}-#{$i} {
				#{$type}: $i * $spacing-base-size !important;
			}
			// m-x-10{marfin-left:10px;marfin-right:10px} || p-x-30{padding-left:30px;padding-right:30px;}
			.#{$typeKey}-x-#{$i} {
				#{$type}-left: $i * $spacing-base-size !important;
				#{$type}-right: $i * $spacing-base-size !important;
			}
			// m-y-10{marfin-top:10px;marfin-bottom:10px} || p-y-30{padding-top:30px;padding-bottom:30px;}
			.#{$typeKey}-y-#{$i} {
				#{$type}-top: $i * $spacing-base-size !important;
				#{$type}-bottom: $i * $spacing-base-size !important;
			}
			// m-t-10{margin-top: 10px} || m-l-10{margin-left:10px} || p-r-10{padding-right:10px} || p-b-10{paddding-bottom:10px}
			@each $directionsKey, $directions in $spacing-directions {
				.#{$typeKey}-#{$directionsKey}-#{$i} {
					#{$type}-#{$directions}: $i * $spacing-base-size !important;
				}
			}
		}
	}
}

@for $i from 1 through 10 {
	.alpha-#{$i} {
		opacity: $i * 0.1; 
	}
}

@for $i from 1 through 200 {
	.radius-#{$i} {
		border-radius: $i * $spacing-base-size !important;
		overflow: hidden;
	}
}

@for $i from 1 through 750 {
	.w-#{$i} {
		width: $i * $spacing-base-size !important;
	}
}

